<html>
    <head>
        <meta charset="utf-8">
        <title>TM Translator</title>
        
        <style>
            * {
                font-family: "Meiryo", sans-serif;
                font-size: 13px;
                line-height: 1.5em;
                color: rgb(50, 50, 50);
                
                margin:0;
                padding:0;
                
                -webkit-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            button {
                padding: 2px 8px;
            }
            
            #wrapper {
                /*
                margin: 0 auto;
                width: 100%;
                padding: 40px;
                */
            }
        </style>
        
        <style>
            /* header */
            header {
                background-color: rgb(240, 240, 240);
                border-bottom: 1px solid rgb(220, 220, 220);
                height: 100px;
                padding-top:30px;
            }
            
            header h1 {
                padding-left: 40px;
                font-size: 30px;
                text-shadow: 2px 2px 2px #888;
            }
            
        </style>
        
        <style>
            
            a.word {
                text-decoration: none;
            }
            
            a.word:hover {
                color:white;
                background-color:black;
            }
            
            #container {
                margin: 0 auto;
                width: 100%;
                padding: 50px;
            }
            
            #main {
            }
            
            #editor {
                width:100%;
            }
            
            #editor textarea {
                padding: 5px;
                width:100%;
            }
            
            #result {
                display: -webkit-box;
                display: -moz-box;
                margin-top: 30px;
            }
            
            #sentence-list {
                width:50%;
                background-color: rgb(250, 250, 250);
                border: solid 1px rgb(240, 240, 240);
                padding: 20px;
            }
            #sentence-list p {
                margin: 5px;
                padding: 5px;
            }
            #sentence-list p:hover {
                background-color: yellow;
            }
            #sentence-info {
                width:50%;
                padding: 20px;
            }
            
            #sentence-info p {
                padding: 5px;
                font-size: 16px;
            }
            
            #sentence-en,
            #sentence-ja
            {
            }
            
            table#word-list {
                width: 100%;
                margin-top:20px;
            }
            
            table#word-list th {
                padding: 5px 10px;
                color: white;
                background-color: black;
            }
            table#word-list td {
                padding: 5px 10px;
            }
            
            table#word-list tr:nth-child(even) {
                background-color: rgb(240, 240, 240);
            }
            
            table#word-list td {
                border: solid 1px rgb(240, 240, 240);
                /*
                background-color: rgb(240, 240, 240);
                */
            }
            table#word-list td.no,
            table#word-list td.count
            {
                width: 40px;
                text-align: right;
            }
            table#word-list td.play-word {
                width: 30px;
                text-align: center;
            }
            
        </style>
        
        <style>
            /* footer */
            footer {
                border-top: 1px solid rgb(220, 220, 220);
                background-color: rgb(240, 240, 240);
                height: 100%;
                min-width: 100px;
                padding-top:15px;
            }
            
            footer .link-list {
                margin: 0 auto;
                width: 200px;
                
                display: -webkit-box;
                display: -moz-box;
            }
            
            footer .link-list>* {
                display: block;
                margin: 5px;
                padding: 5px;
            }
        </style>
        
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script>
            var $id = function(id) { return document.getElementById(id); };
            var $classes = function(c) { return document.getElementsByClassName(c); };
            var $query = function(q, i) { i=i||0; return document.querySelectorAll(q)[0]; };
            var $create = function(tag, parent)
            {
                var e = document.createElement(tag);
                if (parent) parent.appendChild(e);
                return e;
            };
            
            if (!HTMLElement.prototype.innerText) {
                HTMLElement.prototype.__defineGetter__("innerText", function(){
                    return this.textContent;
                });
                HTMLElement.prototype.__defineSetter__("innerText", function(text){
                    this.textContent = text;
                });
            }
        </script>
        
        <script>
            
            google.load("language", '1');
            
            var URL = "http://translate.google.com/translate_tts?q=";
            
            window.addEventListener("load", function(){
                
                
                var temp = "";
                setInterval(function(){
                    if (temp != $id('ta').value) {
                        splitSentence($id('ta').value);
                    }
                    temp = $id('ta').value;
                }, 500);
                
                $id("play-sentence").addEventListener("click", function(){
                    playWord( $id("sentence-en").innerText );
                }, false);
                
            }, false);
            
            var splitSentence = function(sentence)
            {
                // var sentence_list = sentence.split(/[.,\n]/);
                // var sentence_list = sentence.split(/[\n]/);
                var sentence_list = sentence.match(/[^\.\n]+[\.\n]/gm);
                
                if (!sentence_list) return ;
                
                var list = $id("sentence-list");
                list.innerHTML = "";
                for (var i=0; i<sentence_list.length; ++i) {
                    var p = $create("p"); list.appendChild(p);
                    /*
                    sentence_list[i] = sentence_list[i].replace(/[\w]+/g, function(m){
                        return "<a href='#' class='word'>" + m + "</a>";
                    });
                    */
                    p.innerHTML = sentence_list[i];
                    p.onclick = function() { settingResult(this.innerText); };
                }
                
                /*
                var sentence_list = sentence.match(/[\w]+/g);
                for (var i=0; i<sentence_list.length; ++i) {
                    var p = $create("p"); list.appendChild(p);
                    p.innerText = sentence_list[i];
                    p.onclick = function(){
                        playWord(this.innerText);
                        return false;
                    };
                }
                */
            };
            
            var settingResult = function(sentence)
            {
                $id("sentence-en").innerText = sentence;
                
                // 翻訳
                google.language.translate(sentence, "en", "ja", function(result){
                    console.dir(result);
                    $id("sentence-ja").innerText = result.translation;
                });
                
                $query("#word-list tbody").appendChild( createWordElement("word") );
                $query("#word-list tbody").appendChild( createWordElement("test") );
            };
            
            var createWordElement = function(word)
            {
                var tr = $create("tr");
                
                var no = $create("td", tr);
                no.innerHTML = 1;
                no.classList.add("no");
                
                var en = $create("td", tr);
                en.innerText = word;
                
                var ja = $create("td", tr);
                // 翻訳
                google.language.translate(word, "en", "ja", function(result){
                    ja.innerText = result.translation;
                });
                
                var count = $create("td", tr);
                count.innerText = 1;
                count.classList.add("count");
                
                var play = $create("td", tr);
                play.classList.add("play-word");
                var button = $create("button", play);
                button.innerText = "play";
                button.addEventListener("click", function(){
                    playWord( en.innerText );
                }, false);
                
                return tr;
                /*
                <tr>
                    <td class="no">1</td>
                    <td>Truth</td>
                    <td>本当</td>
                    <td class="count">2</td>
                    <td class="play-word"><button>Play</button></td>
                </tr>
                 */
            };
            
            var playWord = function(word)
            {
                console.log(word);
                var EUC = encodeURIComponent;
                word = EUC(word);
                
                var audio = new Audio(URL+word);
                audio.onload = function(){
                    console.log("load");
                };
                audio.onerror = function(){
                    console.log("error");
                };
                // audio.load();
                audio.play();
            };
        </script>
        
    </head>
    
    <body>
        <div id="wrapper">
            
            <header>
                <h1>TM Translator</h1>
            </header>
            
            <div id="container">
                <div id="main">
                    
                    <div id="editor">
                        <textarea id="ta" rows="25">
Stanford Report, June 14, 2005

'You've got to find what you love,' Jobs says
I am honored to be with you today at your commencement from one of the finest universities in the world.
I never graduated from college.
Truth be told, this is the closest I've ever gotten to a college graduation.
Today I want to tell you three stories from my life.
That's it. No big deal. Just three stories.

The first story is about connecting the dots.

I dropped out of Reed College after the first 6 months, but then stayed around as a drop-in for another 18 months or so before I really quit.
So why did I drop out?

It started before I was born.
My biological mother was a young, unwed college graduate student, and she decided to put me up for adoption.
She felt very strongly that I should be adopted by college graduates, so everything was all set for me to be adopted at birth by a lawyer and his wife.
Except that when I popped out they decided at the last minute that they really wanted a girl.
So my parents, who were on a waiting list, got a call in the middle of the night asking:"We have an unexpected baby boy; do you want him?"
They said: "Of course."
My biological mother later found out that my mother had never graduated from college and that my father had never graduated from high school.
She refused to sign the final adoption papers.
She only relented a few months later when my parents promised that I would someday go to college.
                        </textarea><br />
                        <!--
                        <textarea id="ta" rows="25"></textarea><br />
                        -->
                        <!--
                        <button onclick="splitSentence($id('ta').value);">play</button>
                        -->
                    </div>
                    
                    <div id="result">
                        <div id="sentence-list"></div>
                        <div id="sentence-info">
                            <p id="sentence-en">Truth be told, this is the closest I've ever gotten to a college graduation.</p>
                            <p id="sentence-ja">本当のことを言うと、これは私が今まで大学卒業まで行ったのだ近いです。</p>
                            <p>
                                <button id="play-sentence">Play</button>
                            </p>
                            <table id="word-list">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>English</th>
                                        <th>Japanese</th>
                                        <th>Count</th>
                                        <th>Play</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="no">1</td>
                                        <td>Truth</td>
                                        <td>本当</td>
                                        <td class="count">2</td>
                                        <td class="play-word"><button>Play</button></td>
                                    </tr>
                                    <tr>
                                        <td class="no">2</td>
                                        <td>Truth</td>
                                        <td>本当</td>
                                        <td class="count">2</td>
                                        <td class="play-word"><button>Play</button></td>
                                    </tr>
                                    <tr>
                                        <td class="no">3</td>
                                        <td>Truth</td>
                                        <td>本当</td>
                                        <td class="count">2</td>
                                        <td class="play-word"><button>Play</button></td>
                                    </tr>
                                    <tr>
                                        <td class="no">4</td>
                                        <td>Truth</td>
                                        <td>本当</td>
                                        <td class="count">2</td>
                                        <td class="play-word"><button>Play</button></td>
                                    </tr>
                                    <tr>
                                        <td class="no">5</td>
                                        <td>Truth</td>
                                        <td>本当</td>
                                        <td class="count">2</td>
                                        <td class="play-word"><button>Play</button></td>
                                    </tr>
                                    <tr>
                                        <td class="no">11</td>
                                        <td>Truth</td>
                                        <td>本当</td>
                                        <td class="count">12</td>
                                        <td class="play-word"><button>Play</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <footer>
                <div class="link-list">
                    <a href="http://tmlife.net" class="blog-link">Blog</a>
                    <a href="#" class="blog-link">Blog</a>
                    <a href="#" class="blog-link">Blog</a>
                    <a href="#" class="blog-link">Blog</a>
                </div>
            </footer>
        
        </div>
        
    </body>
</html>

